<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo_list</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="dist/style/weui.min.css">
    <link rel="stylesheet" href="css/demo_list.css">
    <script src="js/zepto.js"></script>
    <script src="js/touch.js"></script>
    <script src="js/demo_list.js"></script>
</head>
<body>
<div id="categoryBody" class="category-viewport">
    <div id="rootList" class="jd-category-tab">
        <div style="overflow: hidden; height: 595px;" id="category8">
            <ul style="transform: translateY(0px);" id="category7">
                <li class="cur"><a  href="javascript:void(0);">热门推荐</a></li>
                <li class=""><a href="javascript:void(0);">条目1</a></li>
                <li class=""><a href="javascript:void(0);">条目2</a></li>
                <!--以下为重复行-->
                <li class=""><a href="javascript:void(0);">条目3</a></li>
                <li class=""><a href="javascript:void(0);">条目4</a></li>
                <li class=""><a href="javascript:void(0);">条目5</a></li>
                <li class=""><a href="javascript:void(0);">条目6</a></li>
                <li class=""><a href="javascript:void(0);">条目7</a></li>
                <li class=""><a href="javascript:void(0);">条目7</a></li>
                <li class=""><a href="javascript:void(0);">条目7</a></li>
                <li class=""><a href="javascript:void(0);">条目7</a></li>
                <li class=""><a href="javascript:void(0);">条目7</a></li>
                <li class=""><a href="javascript:void(0);">条目7</a></li>
                <li class=""><a href="javascript:void(0);">条目7</a></li>
                <li class=""><a href="javascript:void(0);">条目7</a></li>
                <li class=""><a href="javascript:void(0);">条目7</a></li>
            </ul>
        </div>
    </div>
    <div class="jd-category-content">
        <div id="branchScroll" style="overflow: hidden; height: 595px; width: 270px;" class="jd-category-content-wrapper">
            <div id="branchList" style="transform: translateY(0px);">
                <div class="jd-category-div cur">
                    <h4>热门分类</h4>
                    <ul class="jd-category-style-1">
                        <li>
                            <a class="J_ping" report-eventparam="/products/0-44449999-655.html" report-eventid="MCategory_Recommend" id="branch_38" href="/products/0-44449999-655.html">
                                <span>飞机</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="category9" class="jd-category-loadfail" style="display: none;">
                <div class="loadfail-content">
                    <div class="failing"></div><span>加载失败</span>
                    <a href="javascript:void(0);" id="category10" class="btn-loadfail"></a>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="assets/js/zepto.js"></script>
<script type="text/javascript" src="dist/js/sm.js"></script>
<script src="dist/js/sm-extend.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/config.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/iscroll.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/template.js" type="text/javascript" charset="utf-8"></script>
<!--JS获取ajax信息部分-->
<script>
       $(document).ready(function(){
          $("#category7 li").each(function(i){
                $(this).click(function(){
                    $("#category7 li").removeClass("cur").eq(i).addClass("cur");
                    var info_tab = $('#test');
                    var data = {
                        title: '基本例子',
                        isAdmin: true,
                        list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
                    };
                    var html = template('test', data);
                    $('.jd-category-style-1').html(html);
                })
            })
       });
</script>
<!--template模板-->
<script id="test" type="text/html">
    {{if isAdmin}}
        {{each list as value i}}
        <li>{{value}}</li>
        {{/each}}
    {{/if}}
</script>
<script>

</script>
</body>
</html>